<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useOldPartMultipleReturn } from '@/services/pages/storage/useWarehouse'
  import { FormInstance } from 'element-plus'
  import { PropType, ref, watch } from 'vue'

  const { submitForm, submitLoading, submit, resetForm } = useOldPartMultipleReturn()

  const props = defineProps({
    idList: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单校验规则
  const rules = {
    logisticsCorpName: [{ required: true, message: '请输入物流公司', trigger: ['change', 'blur'] }],
    logisticsCode: [{ required: true, message: '请输入物流单号', trigger: ['change', 'blur'] }],
  }

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  /**
   * 保存事件
   */
  const onSave = async () => {
    if (!formInstance.value) {
      return
    }
    try {
      await formInstance.value.validate()
      const res = await submit()
      if (res.code === 20000) {
        HMessage.success('保存成功')
        hideDialog()
        emits('update')
        return
      }
      HMessageBox.error(res.message)
    } catch (error) {
      // error
    }
  }

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    resetForm()
    visible.value = false
  }

  watch(visible, (value) => {
    if (value) {
      submitForm.value.ids = props.idList
    }
  })
</script>

<template>
  <h-dialog v-model="visible" title="批量退回" :loading="submitLoading" @close="hideDialog">
    <el-form
      ref="formInstance"
      :model="submitForm"
      inline-message
      label-position="top"
      class="modal_form_content"
      :rules="rules"
    >
      <!-- 物流公司 -->
      <el-form-item label="物流公司" prop="logisticsCorpName">
        <el-input
          v-model="submitForm.logisticsCorpName"
          maxlength="100"
          placeholder="请输入物流公司"
        />
      </el-form-item>

      <!-- 物流单号 -->
      <el-form-item label="物流单号" prop="logisticsCode">
        <el-input v-model="submitForm.logisticsCode" maxlength="100" placeholder="请输入物流单号" />
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="onSave">保存</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss"></style>
